<template>
  <div>
    <el-table :data="cartItems" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="drug.name" label="药品名称"></el-table-column>
      <el-table-column prop="quantity" label="数量">
        <template #default="scope">
          <el-button size="mini" icon="el-icon-minus" @click="updateQuantity(scope.row, -1)">-</el-button>
          {{ scope.row.quantity }}
          <el-button size="mini" icon="el-icon-plus" @click="updateQuantity(scope.row, 1)">+</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="drug.price" label="单价"></el-table-column>
      <el-table-column label="总价">
        <template #default="scope">
          {{ (scope.row.quantity * scope.row.drug.price).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="removeItem(scope.row)">取消购买</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-price">总价: {{ selectedTotalPrice }}</div>
    <el-button type="primary" @click="checkout" :disabled="selectedTotalPrice > balance">结算</el-button>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { updateCartItemQuantity, removeCartItem, getCartItems } from '@/api/cart';
import { createOrder } from '@/api/order';
import { getUserInfo } from '@/api/user';

export default {
  data() {
    return {
      cartItems: [],
      balance: 5000, // 示例余额
      selectedItems: []
    };
  },
  computed: {
    selectedTotalPrice() {
      return this.selectedItems.reduce((total, item) => total + item.quantity * item.drug.price, 0).toFixed(2);
    }
  },
  methods: {
    async fetchCartItems() {
      try {
        const items = await getCartItems(1); // 假设用户ID为1
        this.cartItems = items;
      } catch (error) {
        ElMessage.error('加载购物车失败: ' + error.message);
      }
    },
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    },

    async updateQuantity(item, change) {
      const newQuantity = item.quantity + change;
      if (newQuantity < 1) {
        ElMessage.error('数量不能少于1');
        return;
      }
      try {
        await updateCartItemQuantity(item.userId, item.drugId, newQuantity);
        this.fetchCartItems();
      } catch (error) {
        ElMessage.error('更新数量失败: ' + error.message);
      }
    },
    async removeItem(item) {
      try {
        await removeCartItem(item.userId, item.drugId);
        this.fetchCartItems();  // 也可能需要更新 selectedItems，如果被删除的项是选中的
      } catch (error) {
        ElMessage.error('移除商品失败: ' + error.message);
      }
    },
/*    async checkout() {
      if (this.selectedItems.length === 0) {
        ElMessage.error('请至少选择一个商品进行结算');
        return;
      }

      if (this.selectedTotalPrice > this.balance) {
        ElMessage.error('余额不足，请充值或减少购买数量');
        return;
      }

      try {
        const orderDetails = {
          userId: 1,
          items: this.selectedItems.map(item => ({
            drugId: item.drug.id,
            quantity: item.quantity
          })),
          totalPrice: parseFloat(this.selectedTotalPrice)
        };
        await createOrder(orderDetails);

        // 如果订单成功创建，则删除已结算的商品
        for (const item of this.selectedItems) {
          await removeCartItem(item.userId, item.drugId); // 删除每一个选中的商品
        }

        // 重新获取购物车数据，确认是否清空
        await this.fetchCartItems();
        this.selectedItems = []; // 清空已选商品列表
        ElMessage.success('订单创建成功');
      } catch (error) {
        ElMessage.error('创建订单失败: ' + error.message);
      }
    }*/


    async fetchUserInfo() {
      try {
        const response = await getUserInfo();
        if (response.data) {
          this.balance = response.data;  // 根据实际返回的数据结构可能需要调整
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
      }
    },

    async checkout() {
      if (this.selectedItems.length === 0) {
        ElMessage.error('请至少选择一个商品进行结算');
        return;
      }

      if (this.selectedTotalPrice > this.balance) {
        ElMessage.error('余额不足，请充值或减少购买数量');
        return;
      }

      const orderDetails = {
        userId: 1,  // 确保这里的 userId 是正确设置的
        items: this.selectedItems.map(item => ({
          drugId: item.drug.id,
          quantity: item.quantity,
          price: item.drug.price  // 确保传递单价
        })),
        totalPrice: parseFloat(this.selectedTotalPrice)
      };

      // 在发送请求前打印订单详情
      console.log("订单细节被发送到后端:", orderDetails);

      try {
        const response = await createOrder(orderDetails);
        if (response) {
          // 更新界面上的余额
          await this.fetchUserInfo();  // 建议从后端重新获取余额以确保数据一致性

          // 清空已结算的商品
          this.cartItems = this.cartItems.filter(item =>
              !this.selectedItems.some(selected => selected.drug.id === item.drug.id));
          this.selectedItems = [];

          ElMessage.success('订单创建成功');
        }
      } catch (error) {
        ElMessage.error('创建订单失败: ' + error.message);
      }
    }





  },
  created() {
    this.fetchCartItems();
  }
};
</script>
